<template>
  <el-card class="admin-card" shadow="hover">
    <div class="admin-header">
      <h3>{{ admin.name }}</h3>
      <el-tag type="info">{{ admin.department || "No Department" }}</el-tag>
    </div>
    <el-divider></el-divider>

    <el-row>
      <el-col :span="12">
        <p><strong>ID:</strong> {{ admin.adminId }}</p>
      </el-col>
      <el-col :span="12">
        <p><strong>Password:</strong> {{ admin.password }}</p> <!-- Password is hidden for security -->
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <p><strong>history:</strong> {{ admin.history }}</p>
      </el-col>
      <el-col :span="12">
        <p><strong>limit:</strong> {{ admin.limit }}</p> <!-- Password is hidden for security -->
      </el-col>
    </el-row>

    <el-divider></el-divider>
  </el-card>
</template>

<script setup lang="ts">
import {defineProps, defineEmits, ref, onMounted} from 'vue';
import { ElMessage } from 'element-plus';
import CreateQForm from "@/components/CreateQForm.vue";
import instance from "@/utils/http";
import {useAuthStore} from "@/stores/auth";
import {useRouter} from "vue-router";

interface Admin {
  adminId: number;
  name: string;
  department?: string;
  history?: string;
  limit?: string;
  password: string;
}

const admin = ref<Admin>({
  adminId: 0,
  name: "",
  department: "",
  history: "",
  limit: "",
  password:""
})

const router = useRouter()


onMounted(()=>{

  instance.get("/auth/admin/profile").then(res=>{
   if(res.data.code === 404){
     localStorage.clear()
     useAuthStore().clearToken()
     router.go(0)
   }else{
     admin.value = res.data.data
   }
  })

})

// Editable state
const isEditing = ref(false);

// Editable fields
const editableFields = ref({
  history: admin.value.history || '',
  limit: admin.value.limit || ''
});

// Format field name for display
const formatFieldName = (field: string): string => {
  return field.charAt(0).toUpperCase() + field.slice(1);
};

// Start editing a field
const editField = (field: string) => {
  isEditing.value = true;
};

// Save the changes
const saveEdit = (field: string) => {

  isEditing.value = false;

  ElMessage.success('Changes saved successfully');
};
</script>

<style scoped>
.admin-card {
  width: 100%;
  margin-bottom: 20px;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.actions {
  display: flex;
  justify-content: flex-end;
}
</style>
